import 'package:cached_network_image/cached_network_image.dart';
import 'package:earclean/app/config/colors.dart';
import 'package:earclean/app/modules/widget/app_bar_widget.dart';
import 'package:earclean/app/modules/widget/load_network_image_widget.dart';
import 'package:earclean/app/modules/widget/login_button.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';

import 'package:get/get.dart';

import '../controllers/home_controller.dart';

class HomeView extends GetView<HomeController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const AppBarWidget(
          backgroundColor: ColorConfig.white,
          showLeading: false,
          titleStr: '采耳'),
      backgroundColor: ColorConfig.bg_color,
      body: SingleChildScrollView(
        child: Column(
          children: [
            //
            Obx(() =>
                controller.showAddress.value ? addressWidget() : Container()),
            const SizedBox(height: 12),
            swiperWidget(),
            // 推荐
            Container(
              width: 1.sw,
              padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 8),
              child: Text('推荐技师',
                  style: TextStyle(
                      fontSize: 15.sp,
                      color: ColorConfig.app_main,
                      fontWeight: FontWeight.w600)),
            ),
            tuijianWidget(),
            // 推荐
            Container(
              width: 1.sw,
              padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 8),
              child: Text('舒适采耳',
                  style: TextStyle(
                      fontSize: 15.sp,
                      color: ColorConfig.app_main,
                      fontWeight: FontWeight.w600)),
            ),
            tuijianWidget1(),
            const SizedBox(height: 12),
          ],
        ),
      ),
    );
  }

  Widget tuijianWidget1() {
    return Obx(() => Container(
          width: 1.sw,
          margin: EdgeInsets.symmetric(horizontal: 18),
          child: ListView.separated(
              padding: EdgeInsets.zero,
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              itemBuilder: ((context, index) {
                Map item = controller.shushiList[index];
                return InkWell(
                  onTap: () {
                    controller.toServiceInfo(item);
                  },
                  child: Container(
                    padding: EdgeInsets.symmetric(horizontal: 12, vertical: 10),
                    decoration: BoxDecoration(
                      color: ColorConfig.white,
                      // border: Border.all(color: ColorConfig.app_main, width: .5),
                      borderRadius: BorderRadius.all(Radius.circular(10.r)),
                    ),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          clipBehavior: Clip.hardEdge,
                          decoration: const BoxDecoration(
                            // border: Border.all(color: ColorConfig.app_main, width: .5),
                            borderRadius: BorderRadius.all(Radius.circular(8)),
                          ),
                          child: LoadNetworkImageWidget(
                              width: (1.sw - 36 - 16) / 3,
                              height: (1.sw - 36 - 16) / 3,
                              imageUrl: item['pic'] ?? ""),
                        ),
                        const SizedBox(width: 15),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              const SizedBox(height: 5),
                              Text(item['title'] ?? "",
                                  style: TextStyle(
                                    fontSize: 13.sp,
                                    color: ColorConfig.text_label,
                                  )),
                              const SizedBox(height: 16),
                              Row(
                                children: [
                                  Text(item['features'] ?? "",
                                      style: TextStyle(
                                        fontSize: 12.sp,
                                        color: Color(0xFF5A5A5A),
                                      )),
                                ],
                              ),
                              const SizedBox(height: 16),
                              Row(
                                children: [
                                  Container(
                                    decoration: BoxDecoration(
                                      color: Color(0xFFC9EBB8),
                                      // border: Border.all(color: ColorConfig.app_main, width: .5),
                                      borderRadius: BorderRadius.all(
                                          Radius.circular(5.r)),
                                    ),
                                    padding: const EdgeInsets.symmetric(
                                        horizontal: 6, vertical: 3),
                                    child: Text(item['timer'] ?? "",
                                        style: TextStyle(
                                          fontSize: 12.sp,
                                          color: ColorConfig.app_main,
                                        )),
                                  ),
                                  const SizedBox(width: 10),
                                  Text('${item['price'] ?? ""}/人',
                                      style: TextStyle(
                                        fontSize: 12.sp,
                                        color: Color(0xFF5A5A5A),
                                      )),
                                  const Spacer(),
                                  InkWell(
                                    onTap: () {
                                      controller.toYue(item);
                                    },
                                    child: Container(
                                      decoration: BoxDecoration(
                                        color: ColorConfig.app_main,
                                        // border: Border.all(color: ColorConfig.app_main, width: .5),
                                        borderRadius: BorderRadius.all(
                                            Radius.circular(5.r)),
                                      ),
                                      padding: const EdgeInsets.symmetric(
                                          horizontal: 13, vertical: 5),
                                      child: Text('预约',
                                          style: TextStyle(
                                            fontSize: 12.sp,
                                            color: ColorConfig.white,
                                          )),
                                    ),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              }),
              separatorBuilder: ((context, index) {
                return Container(height: 10);
              }),
              itemCount: controller.tuijianList.length),
        ));
  }

  Widget tuijianWidget() {
    return Obx(() => Container(
          color: ColorConfig.white,
          height: (1.sw - 36 - 16) / 3 + 45,
          child: ListView.separated(
              scrollDirection: Axis.horizontal,
              padding: EdgeInsets.zero,
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              itemBuilder: ((context, index) {
                Map item = controller.tuijianList[index];
                return InkWell(
                  onTap: () {
                    controller.toInfo(item);
                  },
                  child: Container(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          clipBehavior: Clip.hardEdge,
                          decoration: BoxDecoration(
                            // border: Border.all(color: ColorConfig.app_main, width: .5),
                            borderRadius: BorderRadius.all(Radius.circular(8)),
                          ),
                          child: LoadNetworkImageWidget(
                              width: (1.sw - 36 - 16) / 3,
                              height: (1.sw - 36 - 16) / 3,
                              imageUrl: item['avatar'] ?? ""),
                        ),
                        Container(
                          alignment: Alignment.center,
                          padding:
                              EdgeInsets.symmetric(horizontal: 8, vertical: 5),
                          child: Text(item['nickname'] ?? "",
                              style: TextStyle(
                                fontSize: 13.sp,
                                color: ColorConfig.text_label,
                              )),
                        ),
                        Container(
                          padding: EdgeInsets.symmetric(horizontal: 5),
                          width: (1.sw - 36 - 16) / 3,
                          child: Row(
                            children: [
                              Image.asset(
                                'assets/images/xingxing.png',
                                width: 8,
                              ),
                              Image.asset(
                                'assets/images/xingxing.png',
                                width: 8,
                              ),
                              Image.asset(
                                'assets/images/xingxing.png',
                                width: 8,
                              ),
                              Image.asset(
                                'assets/images/xingxing.png',
                                width: 8,
                              ),
                              Image.asset(
                                'assets/images/xingxing.png',
                                width: 8,
                              ),
                              Spacer(),
                              Text('订单${item['orderNum'] ?? ""}',
                                  style: TextStyle(
                                      fontSize: 10, color: Color(0xFF787878)))
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                );
              }),
              separatorBuilder: ((context, index) {
                return Container(width: 8);
              }),
              itemCount: controller.tuijianList.length),
        ));
  }

  Widget addressWidget() {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 25),
      decoration: BoxDecoration(
        color: const Color(0x44000000),
        // border: Border.all(color: ColorConfig.app_main, width: .5),
        borderRadius: BorderRadius.all(Radius.circular(10.r)),
      ),
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
      child: Row(
        children: [
          Text('开启位置权限',
              style: TextStyle(
                fontSize: 14.sp,
                color: ColorConfig.white,
              )),
          const Spacer(),
          Container(
            width: 50.w,
            height: 30.h,
            child: LoginButton("开启", enable: true, onPressed: () {
              controller.openSet();
            }),
          ),
        ],
      ),
    );
  }

  Widget swiperWidget() {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      clipBehavior: Clip.hardEdge,
      decoration: const BoxDecoration(
          // color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(11))),
      width: 1.sw,
      child: AspectRatio(
          aspectRatio: (1.sw - 36) / ((1.sw - 36) * 160.h / (1.sw - 36)),
          child: Obx(() => Swiper(
              autoplay: true,
              loop: true,
              viewportFraction: 1,
              scale: 1,
              //自动轮播
              duration: 1000,
              key: ValueKey(controller.bannerList.length),
              itemBuilder: (c, i) {
                Map item = controller.bannerList[i];
                return InkWell(
                  onTap: () => {},
                  child: CachedNetworkImage(
                    imageUrl: item['img'] ?? "",
                    fit: BoxFit.fill,
                  ),
                );
              },
              itemCount: controller.bannerList.length))),
    );
  }
}
